<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>

<!-- ------------------------------------------------------------ -->
<!-- ************************************************************ -->
<!-- * Graphics and xhtml/css code                              * -->
<!-- * Copyright (c) 2007, Ondrej Pohorsky  All rights reserved * -->
<!-- *                                                          * -->
<!-- * author: Ondrej Pohorsky                                  * -->
<!-- * url:    http://www.poho.cz                               * -->
<!-- * mail:   poho@poho.cz                                     * -->
<!-- * icq:    190484844                                        * -->
<!-- *                                                          * -->
<!-- * This work is under BSD license                           * -->
<!-- ************************************************************ -->
<!-- ------------------------------------------------------------ -->

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<title>Separate columns</title>
<meta name="author" content="Ondrej Pohorsky; http://www.poho.cz; poho@poho.cz" />

<script type="text/javascript" src="../design/js/javascript.js"></script>

<link rel="shortcut icon" href="../design/img/favicon.ico" type="image/x-icon" />

<link rel="stylesheet" href="../design/styles/default.css" media="screen, projection, tv" type="text/css" />
<link rel="stylesheet" href="../design/styles/print.css" media="print" type="text/css" />
</head>
<body>
  <div id="witti">
  
    <div id="header">
      <a href="../index.html" class="logo"><span>Witti</span></a>
      <p class="userinfo"><strong>wellard</strong> | <a href="#">My account</a> | <a href="#">Logout!</a></p>
      <div class="cleaner"></div>
    </div><!-- header -->
    
    <div id="main">
      <div id="menu">
        <ul>
          <li><a href="../index.html">Introduction</a></li>
          <li><a href="../parts.html" class="active">Parts</a>
            <ul>
              <li><a href="../parts/text.html">Text</a></li>
              <li><a href="../parts/lists.html">Lists</a></li>
              <li><a href="../parts/table-list.html">Table as list</a></li>
              <li><a href="../parts/table-info.html">Info table</a></li>
              <li><a href="../parts/form.html">Form</a></li>
              <li><a href="../parts/messages.html">Messages</a></li>
              <li><a href="../parts/separate-columns.html" class="active">Separate columns</a></li>
              <li><a href="../parts/gallery.html">Gallery</a></li>
            </ul>
          </li>
          <li><a href="../licence.html">Licence</a></li>
        </ul>
      </div><!-- content -->
      <div id="content">
        <h1>Separate columns</h1>
        
        <h2>Half-and-half</h2>
        <div class="halfes">
          <div class="leftcol">
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat 
              volutpat. Vestibulum luctus arcu et enim. Nulla vehicula varius lacus. 
              Cras rhoncus tristique mauris. Vestibulum feugiat nulla at metus. Fusce 
              adipiscing est sollicitudin sem. Vestibulum ante ipsum primis in faucibus 
              orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar 
              laoreet nisi. Fusce nec magna sed turpis dapibus gravida. Sed ullamcorper 
              nonummy orci. Vivamus semper dictum dolor. Aenean bibendum, erat at 
              volutpat bibendum, lectus dolor auctor erat, sit amet porttitor elit 
              justo at lacus. Vestibulum ante ipsum primis in faucibus 
              orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar 
              laoreet nisi. Fusce nec magna sed turpis dapibus gravida. Sed ullamcorper 
              nonummy orci. Vivamus semper dictum dolor. Aenean bibendum, erat at 
              volutpat bibendum, lectus dolor auctor erat, sit amet porttitor elit 
              justo at lacus.
            </p>
          </div>
          <div class="rightcol">
            <p>
              <strong>There can be something different...</strong>
            </p>
            <p>
              Aenean bibendum, erat at 
              volutpat bibendum, lectus dolor auctor erat, sit amet porttitor elit 
              justo at lacus. Vestibulum ante ipsum primis in faucibus 
              orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar 
              laoreet nisi. Fusce nec magna gravida. Sed ullamcorper 
              nonummy orci. 
            </p>
          </div>
          <div class="cleaner"></div>
        </div>
        
        <h2>Right column</h2>
        <div class="right-column">
          <div class="rightcol">
            <p>
              <strong>There can be something different...</strong>
            </p>
            <p>
              Aenean bibendum, erat at 
              volutpat bibendum, lectus dolor auctor erat, sit amet porttitor elit 
              justo at lacus. Vestibulum ante ipsum primis in faucibus 
              orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar 
              laoreet nisi. Fusce nec magna gravida. Sed ullamcorper 
              nonummy orci. 
            </p>
          </div>
          <div class="leftcol">
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat 
              volutpat. Vestibulum luctus arcu et enim. Nulla vehicula varius lacus. 
              Cras rhoncus tristique mauris. Vestibulum feugiat nulla at metus. Fusce 
              adipiscing est sollicitudin sem. Vestibulum ante ipsum primis in faucibus 
              orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar 
              laoreet nisi. Fusce nec magna sed turpis dapibus gravida. Sed ullamcorper 
              nonummy orci. Vivamus semper dictum dolor. Aenean bibendum, erat at 
              volutpat bibendum, lectus dolor auctor erat, sit amet porttitor elit 
              justo at lacus. Vestibulum ante ipsum primis in faucibus 
              orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar 
              laoreet nisi. Fusce nec magna sed turpis dapibus gravida. Sed ullamcorper 
              nonummy orci. Vivamus semper dictum dolor. Aenean bibendum, erat at 
              volutpat bibendum, lectus dolor auctor erat, sit amet porttitor elit 
              justo at lacus.
            </p>
          </div>
          <div class="cleaner"></div>
        </div>
        
        <div class="print">
          <a href="javascript:print()"><em>Print this page</em></a>
        </div>
      </div><!-- content -->
      <div class="cleaner"></div>
    </div><!-- main -->
    
    <div id="footer">
      <p>design: <a href="http://www.poho.cz/">Ondřej Pohorský</a></p>
    </div><!-- footer -->
  
  </div><!-- witti -->
</body>
</html>
